<template>
    <div class="addadmin" style="width: 1280px;">
        <div class="admin_header">
            <div class="administrator_header">
                <div class="ax_default box_2" id="u9509">
                    <div id="u9509_div"></div>
                </div>
                <span class="header_words">新增管理员</span>
            </div>

        </div>
        <div class="add_form">
            <div class="form_header">
                <span class="form_admin">编辑管理员信息</span>
            </div>
            <div class="form_news">
                <el-form :model="ruleForm" :rules="rules" label-position="left" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-bind="ruleForm.userName" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="账号" prop="account">
                        <el-input v-model="ruleForm.account" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="选择角色" prop="role">
                        <el-select v-model="ruleForm.role" placeholder="请选择角色" style="width: 320px;">
                            <el-option label="超级管理员" value="超级管理员"></el-option>
                            <el-option label="医生" value="医生"></el-option>
                            <el-option label="护士" value="护士"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="ruleForm.phone" placeholder="请输入内容"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass">
                        <el-input v-model="ruleForm.pass" placeholder="密码"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用" prop="isChecked">
                        <el-switch v-model="ruleForm.isChecked"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" class="add">保存</el-button>

                        <el-button type="primary" plain @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>

                </el-form>

            </div>

        </div>

    </div>
</template>
<script>
import { reserve } from '@/api/systemRole'
export default {
    name: 'Addnewadmin',
    data() {
        return {

            ruleForm: {
                id:'',
                userName: '',
                account: '',
                role: '',
                phone: '',
                phone: '',
                isChecked: false,
                isdelete: 0,
                pass: '',
                addDate: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
                ],
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择角色', trigger: 'change' }
                ],
                phonenumber: [
                    { required: true, message: '手机号输入错误', trigger: 'blur' },
                    { min: 11, max: 11, message: '手机号输入错误', trigger: 'blur' },
                ],
                pass: [
                    { required: true, min: 6, max: 6, message: '密码输入错误', trigger: 'blur' }
                ]
            }
        }

    },
    methods: {

        submitForm(formName) {



            this.$refs[formName].validate(async (valid) => {
                if (valid) {

                    // 获取当前时间
                    var date = new Date();  //获取当前时间
                    var month = date.getMonth() + 1; //月份处理
                    month = (month < 10) ? ('0' + month) : month;//月份为1-9月,在其前面加0
                    var day = date.getDate();//天数处理

                    day = (day < 10) ? ("0" + day) : day;//日期为1-9号,在其前面加了0
                    var hour = date.getHours(),//小时
                        hour = (hour < 10) ? ('0' + hour) : hour
                    var minutes = date.getMinutes()//分钟处理
                    minutes = (minutes < 10) ? ('0' + minutes) : minutes
                    var second = date.getSeconds()//秒处理
                    second = (second < 10) ? ('0' + second) : second
                    var s1 = "-";//定义年月日分隔符-
                    var s2 = ":";//定义时分秒分隔符:
                    //拼接年月日,时分秒
                    this.ruleForm.addDate = date.getFullYear() + s1 + month + s1 + day
                        + " " + hour + s2 + minutes + s2 + second;
                    // 获取列表
                    const _list = JSON.parse(JSON.stringify(this.ruleForm))

                    console.log(_list);
                    try {
                        await reserve(_list);
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    } catch (error) {
                        console.log(error);
                    }
                    // 切换到管理员管理页
                    this.$router.push({
                        path: '/Adminlist'
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }


            });
        },
        resetForm(formName) {
            console.log(this.$refs[formName].resetFields());
            this.$refs[formName].resetFields();
        }

    }
}
</script>
<style lang="scss" scoped>
.addadmin {
    margin: 0 auto;
}

.admin_header {
    display: flex;
    justify-content: space-between;
}

.administrator_header {
    display: flex;
    align-items: center;
}

#u9509 {
    border-width: 0px;
    width: 24px;
    height: 8px;
    display: flex;
    font-size: 16px;
    color: #006EFF;

}

#u9509_div {
    border-width: 0px;
    width: 24px;
    height: 8px;
    background: inherit;
    background-color: rgba(0, 110, 255, 1);
    border: none;
    border-radius: 4px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-size: 16px;
    color: #006EFF;
}

.header_words {
    margin-left: 20px;
    font-size: 24px;
}

.add_form {
    box-shadow: 0 0 20px #ccc;
    border-radius: 10px;
    margin-top: 20px;
    background-color: #fff;
}

.demo-ruleForm {
    width: 420px;
}

.form_header {
    border-radius: 10px 10px 0 0;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    background-color: rgba(242, 242, 242, 1);
    padding-left: 20px;
}

.form_admin {
    display: inline-block;
    color: #006EFF;
}

.form_news {
    padding: 20px 50px;
}

.el-form-item__label {
    text-align: left;
}


.el-button {
    padding: 12px 50px;
    font-size: 14px;
}
</style>